<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title>部门基本信息维护</title>
		
		<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
		<!-- 包括所有已编译的插件 -->
		<style>
			th,tbody {
				text-align: center;
			}
			#error-add,#success-add,
			#delete-error,#delete-success,
			#update-error,#update-success{
				padding-top: 150px;
				margin: 0px auto;
				width: 150px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row clearfix">
				<div class="col-md-10 column">
					<button id="modal-988132" href="#modal-container-988132" data-toggle="modal" role="button" type="button" class="btn btn-primary">
						增加
					</button>

					<button id="delete-checked" type="button" class="btn btn-danger">
						删除
					</button>
									
					<!-- 这是增加的页面，默认隐藏 -->
					<div class="modal fade" id="modal-container-988132" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<form class="form-horizontal" role="form">
									<div class="form-group" style="margin-top: 20px;">
										<label for="inputEmail3" class="col-sm-2 control-label">部门名称</label>
										<div class="col-sm-7">
											<input type="text" id="deptName" class="form-control" id="inputEmail3" placeholder="部门名称" />
										</div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										<button type="submit" class="btn btn-primary" data-dismiss="modal" id="dept_add" >保存</button>
									</div>
								</form>
							</div>
						</div>
					</div>

					<!-- 这是修改的页面，默认隐藏 -->
					<div class="modal fade" id="updatePages" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<form class="form-horizontal" role="form">
									<div class="form-group" style="margin-top: 20px;">
										<label for="inputEmail3" class="col-sm-2 control-label">部门名称</label>
										<div class="col-sm-7">
											<input type="text" id="updateDeptName" class="form-control" id="inputEmail3" placeholder="部门名称" />
										</div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										<button type="submit" class="btn btn-primary" data-dismiss="modal" id="dept-update" >保存</button>
									</div>
								</form>
							</div>
						</div>
					</div>
					
					<!-- 这是增加成功的页面，默认隐藏 -->
					<div class="modal fade" id="success-add" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="alert alert-success alert-dismissable">
				            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				                &times;
				            </button>
				        	    增加成功
				        </div>
					</div>
					
					<!-- 这是增加失败的页面，默认隐藏 -->
					<div class="modal fade" id="error-add" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="alert alert-danger alert-dismissable">
				            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				                &times;
				            </button>
				        	    增加失败
				        </div>
					</div>

					<!-- 这是删除成功的页面，默认隐藏 -->
					<div class="modal fade" id="delete-success" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="alert alert-success alert-dismissable">
				            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				                &times;
				            </button>
				        	    删除成功
				        </div>
					</div>

					<!-- 这是删除失败的页面，默认隐藏 -->
					<div class="modal fade" id="delete-error" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="alert alert-danger alert-dismissable">
				            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				                &times;
				            </button>
				        	    删除失败
				        </div>
					</div>

					<!-- 这是删除成功的页面，默认隐藏 -->
					<div class="modal fade" id="update-success" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="alert alert-success alert-dismissable">
				            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				                &times;
				            </button>
				        	    修改成功
				        </div>
					</div>

					<!-- 这是删除失败的页面，默认隐藏 -->
					<div class="modal fade" id="update-error" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="alert alert-danger alert-dismissable">
				            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				                &times;
				            </button>
				        	    修改失败
				        </div>
					</div>
					
					<!--
                    	作者：offline
                    	时间：2017-05-31
                    	描述：表格
                    -->
					<table class="table table-hover table-bordered">
						<thead>
							<tr>
								<th>
									<input id="all-checked" type="checkbox" />
								</th>
								<th>
									部门编号
								</th>
								<th>
									部门名称
								</th>
								<th>
									操作
								</th>
							</tr>
						</thead>
						<tbody id="tbody">
							
						</tbody>
					</table>
					<ul class="pagination" style="position: absolute;top: 350px;left: 300px;">
					    
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var count = 0;
		$(function(){
			var pageSize = 1;
			var curPage = 3;
			ajax(pageSize,curPage);
			list_li();
			
			/**
			 * 进行修改
			 */
			$('#dept-update').bind('click',function(){
				$.ajax({
				   type: "POST",
				   url: getPath()+"/dept",
				   data: ({
				   		"type":"update",
				   		"deptId":this.value,
				   		"deptName":$('#updateDeptName').val(),
				   }),
				   success: function(data){
					  var json = JSON.parse(data);
					  var result = json.result;
					  if("success" == result){
						  $('#update-success').modal('show');
					  }else{
						  $('#update-error').modal('show');
					  }
					}
				});
			});

			/**
			 * 修改填充按钮
			 */
			$('body').on('click','td input[type="button"]',function(){
				$.ajax({
				   type: "POST",
				   url: getPath()+"/dept",
				   data: ({
				   		"type":"updateQuery",
				   		"deptId":this.id
				   }),
				   success: function(data){
				   	  var json = JSON.parse(data);
					  $('#updateDeptName').val(json.data[0].deptName);
					  $('#dept-update').attr('value',json.data[0].deptId);
					}
				});
			});


			/**
			 *	点击全选/全不选
			 */
			$('#all-checked').bind('click',function(){
				if(this.checked){
					$('input[type="checkbox"]').attr('checked','checked');	
				}else{
					$('input[type="checkbox"]').removeAttr('checked');
				}
			});

			/**
			 * 关闭警告框
			 */
			$('.close').bind('click',function(){
				ajax('1','3');
				list_li();
			});

			/**
			 * 进行删除
			 */
			$('#delete-checked').bind('click',function(){
				var hiddenList = $('input[type="checkbox"]:checked');
				var str = "";
				hiddenList.each(function(index,data){
					str = str + data.value + ",";
				});
				str = str.substring(0,str.length-1);

				$.ajax({
				   type: "POST",
				   url: getPath()+"/dept",
				   data: ({
				   		"type":"delete",
				   		"deptId":str
				   }),
				   success: function(data){
					  var json = JSON.parse(data);
					  var result = json.result;
					  if("success" == result){
						  $('#delete-success').modal('show');
					  }else{
						  $('#delete-error').modal('show');
					  }
					}
				});
			});

			/**
			 * 给分页绑定点击事件
			 */
			$('body').on('click','li a',function(){
				var clickText = this.innerText;

				var class_ = this.parentNode.getAttribute('class');
				if('下一页' == clickText){
					if('previous disabled' != class_){
						var nextli = $('li[class="active"]').next();
						$('li').removeAttr('class');
						pageSize = pageSize + 3;
						curPage = curPage + 3;
						ajax(pageSize,curPage);
						if($(nextli).children('a').first().text() == count){
							$(nextli).attr('class','active');
							$('#endpage').attr('class','previous disabled');
							$('#next').attr('class','previous disabled');
						}else if(clickText != count){
							$(nextli).attr('class','active');
						}else{
							$('#endpage').attr('class','previous disabled');
							$('#next').attr('class','previous disabled');
						}
					}
					
				}else if('上一页' == clickText){
					if('previous disabled' != class_){

						var prevli = $('li[class="active"]').prev();
						$('li').removeAttr('class');
						pageSize = pageSize - 3;
							curPage = curPage - 3;
							ajax(pageSize,curPage);
						if($(prevli).children('a').first().text() == '1'){
							$(prevli).attr('class','active');
							$('#homePage').attr('class','previous disabled');
							$('#last').attr('class','previous disabled');
						}else if(pageSize != 1){
							$(prevli).attr('class','active');
							
						}else{
							$('#homePage').attr('class','previous disabled');
							$('#last').attr('class','previous disabled');
						}
					}
					
				}else if('«' == clickText){
					if('previous disabled' != class_){
						var oneA = $('li a');
						$('li').removeAttr('class');
						$(oneA).each(function(index,data){
							if($(data).text() == '1'){
								$(data).parent().attr('class','active');
							}
						});
						pageSize = 1;
						curPage = 3;
						ajax(pageSize,curPage);
						$('#homePage').attr('class','previous disabled');
						$('#last').attr('class','previous disabled');
						$('#endpage').removeAttr('class');
						$('#next').removeAttr('class');
					}
				}else if('»' == clickText){
					if('previous disabled' != class_){
						var lastA = $('li a');
						$('li').removeAttr('class');
						$(lastA).each(function(index,data){
							if($(data).text() == count){
								$(data).parent().attr('class','active');
							}
						});
					 	curPage = 3 * count;
					 	pageSize = curPage - 2;
					 	ajax(pageSize,curPage);
					 	$('#endpage').attr('class','previous disabled');
						$('#next').attr('class','previous disabled');
						$('#homePage').removeAttr('class');
						$('#last').removeAttr('class');
					}
				}else{
					$('li').removeAttr('class');
					if('1' == clickText){
						pageSize = 1;
						curPage = 3;
						ajax(pageSize,curPage);
						this.parentNode.setAttribute('class','active');
						$('#homePage').attr('class','previous disabled');
						$('#last').attr('class','previous disabled');
					}else if(parseInt(count) == parseInt(clickText)){
						curPage = 3 * clickText;
						pageSize = curPage - 2;
						ajax(pageSize,curPage);
						this.parentNode.setAttribute('class','active');
						$('#endpage').attr('class','previous disabled');
						$('#next').attr('class','previous disabled');
					}else{
						curPage = 3 * clickText;
						pageSize = curPage - 2;
						ajax(pageSize,curPage);
						this.parentNode.setAttribute('class','active');
					}
				}
			});
			
			/**
			 * 部门增加
			 */
			$('#dept_add').bind('click',function(){
				$.ajax({
				   type: "POST",
				   url: getPath()+"/dept",
				   data: "type=add&deptName="+$('#deptName').val(),
				   success: function(data){
					  var json = JSON.parse(data);
					  var result = json.result;
					  if("success" == result){
						  $('#success-add').modal('show');
					  }else{
						  $('#error-add').modal('show');
					  }
				   }
				});
			});
		});
		
		/**
		 * 获取当前项目名
		 */
		function getPath(){
			var pathName=window.document.location.pathname;
			var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
			return projectName;
		}
		
		
		/**
		 * 创建分页的方法
		 */
		function list_li(){
			$.ajax({
			   type: "POST",
			   url: getPath()+"/dept",
			   data: "type=query&pageSize=1&curPage=3",
			   success: function(data){
			 	 var jsonObject = JSON.parse(data);
			 	 $('.pagination').empty();
			     $('.pagination').append('<li class="previous disabled" id="homePage"><a href="#">&laquo;</a></li>');
				 $('.pagination').append('<li class="previous disabled" id="last"><a href="#">上一页</a></li>');

			     for(var index=1; index<=jsonObject.count; index++){
			    	 if(index == 1){
			    		 $('.pagination').append('<li class="active"><a href="#">'+index+'</a></li>');    		 
			    	 }else{
				    	 $('.pagination').append('<li><a href="#">'+index+'</a></li>');
			    	 }
			     }
			     $('.pagination').append('<li id="next"><a href="#" >下一页</a></li>');
			     $('.pagination').append('<li id="endpage"><a href="#" >&raquo;</a></li>');

			     if('1' == count){
			     	$('#endpage').attr('class','previous disabled');
					$('#next').attr('class','previous disabled');
			     }
			   }
			});
		}
		
		
		
		/**
		 * 封装ajax重复利用
		 */
		function ajax(pageSize,curPage){
			
			$.ajax({
			   type: "POST",
			   url: getPath()+"/dept",
			   data: "type=query&pageSize="+pageSize+"&curPage="+curPage,
			   success: function(data){
				 var jsonObject = JSON.parse(data);
				 count = parseInt(jsonObject.count);
				 
				 $('#tbody').empty();
			     $(jsonObject.data).each(function(index,data_){
			     	
			     	var tr = $('<tr></tr>');
			     	
					var td1 = $('<td></td>');
					var input_ = $('<input type="checkbox" value='+data_.deptId+'>');
					td1.append(input_);
					
					var td2 = $('<td></td>');
					td2.text(data_.deptId);
					
					var td3 = $('<td></td>');
					td3.text(data_.deptName);
					
					var td4 = $('<td></td>');
					var update = $('<input class="btn btn-success" href="#updatePages" data-toggle="modal" role="button" id='+data_.deptId+' type="button" value="修改">');
					td4.append(update);
					
					tr.append(td1);
					tr.append(td2);
					tr.append(td3);
					tr.append(td4);
					
					$('#tbody').append(tr);
					$('#tbody tr:odd').attr('class','info');
			     })
			     
			   }
			});
		}
	</script>
</html>
